<template>
	<el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
		class="demo-ruleForm" :size="formSize" status-icon>
		<el-form-item label="用户名称" prop="UserName">
			<el-input v-model="ruleForm.UserName" />
		</el-form-item>
		<el-form-item label="登录名称" prop="LoginName">
			<el-input v-model="ruleForm.LoginName" />
		</el-form-item>
		<el-form-item label="登录密码" prop="LoginPwd">
			<el-input v-model="ruleForm.LoginPwd" type="password" autocomplete="off" />
		</el-form-item>
		<el-form-item label="确认密码" prop="LoginPwd2">
			<el-input v-model="ruleForm.LoginPwd2" type="password" autocomplete="off" />
		</el-form-item>
		<el-form-item label="部门" prop="DeptId">
			<el-select v-model="ruleForm.DeptId" placeholder="请选择部门" :options="optionsDect">
				<el-option v-for=" item in optionsDect" :key="item.Id" :label="item.DictName"
                    :value="parseInt(item.DictValue)">
                </el-option>
			</el-select>
		</el-form-item>


		<el-form-item label="性别" prop="Sex">
			<el-radio-group v-model="ruleForm.Sex">
				<el-radio value="男">男</el-radio>
				<el-radio value="女">女</el-radio>
			</el-radio-group>
		</el-form-item>
		<el-form-item label="身份证" prop="IdCard">
		    <el-input v-model="ruleForm.IdCard" />
		</el-form-item>
		<el-form-item label="电话" prop="Tel">
			<el-input v-model="ruleForm.Tel" />
		</el-form-item>
		<el-form-item label="邮箱" prop="Email">
			<el-input v-model="ruleForm.Email" />
		</el-form-item>

		<el-form-item>
			<el-button type="primary" @click="submitForm(ruleFormRef)">
				保存
			</el-button>
			<el-button @click="resetForm(ruleFormRef)">重置</el-button>
		</el-form-item>
	</el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElNotification } from 'element-plus'
import dictapi from "../../api/dictinfoapi"
import userapi from "../../api/userinfoapi"

const emit = defineEmits(['onSave'])

interface RuleForm {
	UserName: string
	Sex: string
	Tel: string
	Email: string
	DeptId: number
	LoginName: string
	LoginPwd: string
	LoginPwd2: string
	IdCard:string
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
	UserName: '',
	Sex: '男',
	Tel: '',
	Email: '',
	DeptId: 1,
	LoginName: '',
	LoginPwd: '',
	LoginPwd2: '',
	IdCard:'',
})


const optionsDect = ref<any>([
])
dictapi.TypeName('部门').then((res:any) => {
	console.log("res", res.data)
	optionsDect.value = res.data
})


const validatePass = (rule: any, value: any, callback: any) => {
	if (value === '') {
		callback(new Error('请输入密码'))
	} else {
		if (ruleForm.LoginPwd2 !== '') {
			if (!ruleFormRef.value) return
			//ruleFormRef.value.validateField('validatePass2')
		}
		callback()
	}
}
const validatePass2 = (rule: any, value: any, callback: any) => {
	if (value === '') {
		callback(new Error('请输入确认密码'))
	} else if (value !== ruleForm.LoginPwd) {
		callback(new Error("两次密码不一致"))
	} else {
		callback()
	}
}

const rules = reactive<FormRules<RuleForm>>({
	UserName: [
		{ required: true, message: '请输入用户名称', trigger: 'blur' },
		{ min: 2, max: 5, message: '2-5个字符', trigger: 'blur' },
	],
	Sex: [
		{}
	],
	Tel: [
		{
			required: true,
			message: '请输入电话',
			trigger: 'blur',
		},
	],
	Email: [
		{
			type: 'string',
			required: true,
			message: '请输入邮箱地址',
			trigger: 'blur',
		},
	],
	LoginName: [
		{
			required: true,
			message: '请输入登录名称',
			trigger: 'blur',
		},
		{ min: 3, max: 20, message: '3-20个字符', trigger: 'blur' },
	],
	LoginPwd: [
		{ validator: validatePass, trigger: 'blur' },
		{
			required: true,
			message: '请输入登录密码',
			trigger: 'blur',
		},
	],
	LoginPwd2: [
		{ validator: validatePass2, trigger: 'blur' },
		{
			required: true,
			message: '请输入确认密码',
			trigger: 'blur',
		},
	],

})

const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			userapi.post(ruleForm).then((res:any) => {
				if (res.code == 1) {
					ElNotification({
						title: 'Success',
						message: '添加成功',
						type: 'success',
						duration: 800,
						onClose: () => {
							emit("onSave", true)
						}
					})
				} else {
					ElNotification({
						title: 'Error',
						message: '失败',
						type: 'error',
						duration: 800,
					})
				}
			}).catch((err:any) => {
				ElNotification({
					title: 'Error',
					message: '失败',
					type: 'error',
					duration: 800,
				})
			})
		} else {
			console.log('error submit!', fields)
		}
	})
}

const resetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.resetFields()
}
</script>